<template>
  <div class="details">
    <el-card>
      <div slot="header" class="clearfix">
        <div class="left">
          <div class="title">
            <div class="back">
              <span> 返回 </span>
              <h6>订单详情</h6>
            </div>
            <!-- <p>
              <span> 订单号: </span>
              <i>JN2222222222</i>
              <span> 当前状态 </span>
              <i class="status"> 排产完成 </i>
            </p> -->
          </div>
          <el-button style="float: right" type="primary" size="small">
            <img class="icons" src="@/assets/imgs/export.png" alt="" />
            导出报表
          </el-button>
        </div>
      </div>
      <el-descriptions class="margin-top" :column="4" border>
        <el-descriptions-item>
          <template slot="label"> 订单编号 </template>
          JN2356498
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 客户名称 </template>
          岛村
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 管理人员 </template>
          张三
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 产品大类 </template>
          被套类
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 产品二级分类 </template>
          纯棉被套
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 业务员 </template>
          张三
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 业务部门 </template>
          业务一部
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 产品名称 </template>
          **
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 分单量 </template>
          650000
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 预排产量 </template>
          650000
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 转换成标准品的预排产量/件 </template>
          179083
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 交期 </template>
          2023/2/23
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 月计划冲销量/件 </template>
          171033
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 月计划冲销量(转换成标准品)/件 </template>
          171033
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 月计划订单冲销量产能占用 </template>
          95.50%
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 月计划剩余产能/件 </template>
          179083
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 排产状态 </template>
          排产完成
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card>
      <div slot="header" class="clearfix">
        <span class="schedulingDetails">排产详情</span>
        <el-radio-group style="float: right" v-model="radio1">
          <el-radio-button label="1">图表</el-radio-button>
          <el-radio-button label="2">列表</el-radio-button>
        </el-radio-group>
      </div>
      <div v-if="radio1 == 1">
        <el-row :gutter="20">
          <el-col :span="7">
            <div class="total-optput">
              <div class="title">订单总计排产量</div>
              <div class="num">
                <div>
                  <span>270000</span>
                  <!-- <i>件</i> -->
                </div>
                <!-- <i>待排产 0 件</i> -->
              </div>
            </div>
            <ul class="output-list">
              <li>
                <div>
                  <i class="self-manufacturing"></i>
                  <span>已排产量</span>
                </div>
                <div>
                  <p>270000</p>
                  <i class="unit">件</i>
                </div>
              </li>
              <el-divider></el-divider>
              <li>
                <div>
                  <i class="subcontractor"></i>
                  <span>外协量</span>
                </div>
                <div>
                  <p>0</p>
                  <i class="unit">件</i>
                </div>
              </li>
              <el-divider></el-divider>
              <li>
                <div>
                  <i class="rush-sales"></i>
                  <span>ERP订单冲销量</span>
                </div>
                <div>
                  <p>270000</p>
                  <i class="unit">件</i>
                </div>
              </li>
            </ul>
          </el-col>
          <el-col :span="17">
            <order-cycle height="400px" width="100%"></order-cycle>
          </el-col>
        </el-row>
        <el-table
          class="table"
          :data="tableData"
          border
          style="width: 100%"
          row-class-name="row-class-name"
        >
          <el-table-column label="周期" align="right" width="150">
            <el-table-column
              prop="factory"
              label="工厂"
              width="120"
              align="center"
              header-align="left"
            >
            </el-table-column>
          </el-table-column>
          <el-table-column prop="w1" label="W1-W4">
            <template slot-scope="scope">
              <div class="table-cell">123</div>
            </template>
          </el-table-column>
          <el-table-column prop="w5" label="W5-W8">
            <template slot-scope="scope">
              <div class="table-cell">123</div>
            </template>
          </el-table-column>
          <el-table-column prop="w9" label="W9-W12">
            <template slot-scope="scope">
              <div class="table-cell">123</div>
            </template>
          </el-table-column>
          <el-table-column prop="w13" label="W13-W16">
            <template slot-scope="scope">
              <div class="table-cell">123</div>
            </template>
          </el-table-column>
          <el-table-column prop="w17" label="W17-W20">
            <template slot-scope="scope">
              <div class="table-cell">123</div>
            </template>
          </el-table-column>
          <el-table-column prop="w21" label="W21-W24">
            <template slot-scope="scope">
              <div class="table-cell">123</div>
            </template>
          </el-table-column>
          <el-table-column prop="w25" label="W25-W28">
            <template slot-scope="scope">
              <div class="table-cell">123</div>
            </template>
          </el-table-column>
          <el-table-column prop="w29" label="W29-W32">
            <template slot-scope="scope">
              <div class="table-cell">123</div>
            </template>
          </el-table-column>
          <el-table-column prop="w33" label="W33-W36">
            <template slot-scope="scope">
              <div class="table-cell">123</div>
            </template>
          </el-table-column>
          <el-table-column prop="w37" label="W37-W40">
            <template slot-scope="scope">
              <div class="table-cell">123</div>
            </template>
          </el-table-column>
          <el-table-column prop="w41" label="W41-W44">
            <template slot-scope="scope">
              <div class="table-cell">123</div>
            </template>
          </el-table-column>
          <el-table-column prop="w45" label="W45-W48">
            <template slot-scope="scope">
              <div class="table-cell">123</div>
            </template>
          </el-table-column>
          <el-table-column prop="w49" label="W49-W52">
            <template slot-scope="scope">
              <div class="table-cell">123</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="radio1 == 2">
        <el-table
          :data="tableList"
          style="width: 100%; margin-bottom: 20px"
          row-key="id"
          default-expand-all
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="date" label="排产地区"> </el-table-column>
          <el-table-column prop="name" label="管理人员"> </el-table-column>
          <el-table-column prop="address" label="预计开始生产日期">
          </el-table-column>
          <el-table-column prop="address" label="交期"> </el-table-column>
          <el-table-column prop="address" label="分单数量"> </el-table-column>
          <el-table-column prop="address" label="预排订单周期内标准品产能池/件">
          </el-table-column>
          <el-table-column prop="address" label="预排订单周期内地域产能占用">
          </el-table-column>
          <el-table-column prop="address" label="ERP订单冲销量/件">
          </el-table-column>
          <el-table-column prop="address" label="ERP订单冲销量地域产能占用">
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import orderCycle from "@/components/Charts/orderCycle";
export default {
  components: { orderCycle },
  data() {
    return {
      radio1: "2",
      tableData: [
        {
          factory: "平度一厂",
          w1: "213",
          w5: "123",
        },
        {
          factory: "平度二厂",
          w5: "213",
          w9: "123",
        },
      ],
      tableList: [],
    };
  },

  created() {},
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="scss">
@import "../../styles/element-variables.scss";
.details {
  .el-card {
    margin-bottom: 20px;
    padding: 0 10px;
  }
  .left {
    position: relative;
    display: flex;
    align-items: center;
    // .back {}
    .title {
      h6 {
        display: inline-block;
        margin: unset;
        font-size: 26px;
      }
      p {
        margin-top: 15px;
        padding-left: 25px;
        span {
          font-size: 18px;
        }
        i {
          font-size: 18px;
          margin-right: 30px;
        }
        .status {
          font-weight: 800;
          color: $--color-primary;
        }
      }
    }
    .el-button {
      position: absolute;
      right: 0;
    }
  }
  .schedulingDetails {
    font-size: 20px;
    font-weight: 500;
    color: #171f31;
  }
  .total-optput {
    width: 100%;
    padding: 30px 40px;
    background: linear-gradient(-90deg, #2945cb, #2a67e4, #3798fd);
    box-shadow: 0px 6px 18px 0px rgba(28, 53, 170, 0.28);
    border-radius: 10px;
    font-size: 18px;
    color: #fff;
    .title {
      margin-bottom: 26px;
    }
    .num {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      span {
        font-size: 40px;
        font-weight: 500;
      }
    }
  }
  .output-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: unset;
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      div {
        display: flex;
        align-items: center;
      }
      i {
        display: inline-block;
        width: 12px;
        height: 38px;
        line-height: 38px;
      }
      .self-manufacturing {
        background: #3091f2;
      }

      .subcontractor {
        background-color: #ff8b17;
      }
      .rush-sales {
        background-color: #2945cb;
      }
      span {
        font-size: 18px;
        color: #363b48;
        margin-left: 21px;
      }
      p {
        font-size: 30px;
        font-weight: 800;
        display: inline-block;
      }
      .unit {
        font-size: 16px;
        color: #8fa1c9;
        margin-left: 12px;
      }
    }
  }
  ::v-deep .el-table thead.is-group th {
    background: none;
  }
  ::v-deep .table thead.is-group tr:first-of-type th:first-of-type {
    border-bottom: none;
  }
  ::v-deep .table thead.is-group tr:first-of-type th:first-of-type:before {
    content: "";
    position: absolute;
    width: 1px;
    height: 86px; /*这里需要自己调整，根据td的宽度和高度*/
    top: 0;
    left: 0;
    background-color: #bbb;
    opacity: 0.3;
    display: block;
    transform: rotate(-51deg); /*这里需要自己调整，根据线的位置*/
    transform-origin: top;
  }
  ::v-deep .table thead.is-group tr:last-of-type th:first-of-type:before {
    content: "";
    position: absolute;
    width: 1px;
    height: 105px; /*这里需要自己调整，根据td的宽度和高度*/
    bottom: 0;
    right: 0;
    background-color: #bbb;
    opacity: 0.3;
    display: block;
    transform: rotate(-52deg); /*这里需要自己调整，根据线的位置*/
    transform-origin: bottom;
  }
  ::v-deep .table {
    .row-class-name {
      > :not(:first-child) {
        padding: unset;
        .cell {
          padding: unset;
        }
      }
    }
  }
  .table-cell {
    color: #fff;
    background: #3091f2;
    height: 44px;
    margin: 3px;
  }
  .icons {
    vertical-align: middle;
  }
}
</style>
<style>
.el-table__empty-block {
  width: 100% !important;
}
</style>
